<template>
    <div>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" direction="ltr">
            <el-empty v-if="isShowEmpty" description="这篇文章还没有人评论哦，快来评论吧"></el-empty>
            <el-card class="box-card">
                <div v-for="(comment, index) in commentList" :key="comment.commentId">
                    <div>
                        <el-avatar :src="comment.commentUser.avatar">
                        </el-avatar>
                        <el-tag style="margin-left:10px">{{ comment.commentUser.username }}</el-tag>
                        <el-tag type="success">{{ comment.commentTime }}</el-tag>
                        <span style="display:block">{{ comment.commentContent }}
                            <el-button icon="el-icon-s-comment" circle @click="commentOther(index)"
                                style="margin-left:10px">
                            </el-button>
                        </span>
                    </div>
                    <div v-if="comment.replayTableEntityList != null">
                        <div v-for="replay in comment.replayTableEntityList" :key="replay.replyId"
                            style="margin-left:30px;margin-bottom:10px">
                            <el-avatar :src="replay.commentUser.avatar">
                            </el-avatar>
                            <el-tag style="margin-left:10px;">{{ replay.commentUser.username }}:</el-tag>
                            <span style="display:block">{{ replay.replayContent }}
                            </span>
                        </div>
                    </div>
                    <div>
                        <el-input placeholder="请输入内容" v-if="index == inputIndex ? true : false" v-model="gradeTwoInput"
                            clearable style="width:80%">
                        </el-input>
                        <el-button icon="el-icon-chat-dot-square" v-if="index == inputIndex ? true : false"
                            @click="goCommentTwoUp(comment.articleId, comment.commentId, comment.commentUser.userId)">
                        </el-button>
                    </div>
                    <el-divider></el-divider>
                </div>
                <el-input placeholder="请输入内容" v-model="gradeOneInput" style="width:80%" clearable></el-input>
                <el-button icon="el-icon-chat-dot-square" @click="goCommenOnetUp"></el-button>
            </el-card>
        </el-drawer>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import api from '../utils/api';
import { Message } from 'element-ui';
export default {
    data() {
        return {
            isShowEmpty: false,
            gradeTwoInput: '',
            inputIndex: '',
            isShowGradeTwo: false,
            commentList: [],
            drawer: false,
            gradeOneInput: '',
            isShowComment: false,
            input3: '',
            articleId: ''
        };
    },
    computed: {
        ifShowReplay() {
            this.commentList.forEach(item => {
                if (item.replayTableEntityList != '') {
                    return true
                } else {
                    return false
                }
            })
        },
    },
    methods: {
        commentOther(key) {
            this.inputIndex = key
        },
        goCommentTwoUp(articleId, commentId, userId) {
            var token = getToken()
            if (token==undefined||token == '' || token == null) {
                this.$message({
                    type: "error",
                    message: "请先登录"
                })
                this.$router.push({
                    name: 'login'
                })
            }else{
            var userId = this.$store.state.user.userId
            if (userId == '') {
                userId = -1
            }
            var inputComment = this.gradeTwoInput
            if (inputComment == '' || inputComment == null) {
                Message({
                    type: 'error',
                    message: '输入的内容不能为空,想好再来发吧'
                })
            } else {
                api.commentArticle(articleId, userId, inputComment, commentId).then(res => {
                    if (res.data) {
                        Message({
                            type: 'success',
                            message: '评论成功'
                        })
                        this.gradeOneInput = ''
                        api.findArticleComment(articleId).then(res => {
                            this.commentList = res.data
                            this.drawer = true
                        })
                    } else {
                        Message({
                            type: 'error',
                            message: '评论发送失败'
                        })
                    }
                }).catch(error => {

                })
            }
            }
        },
        goCommenOnetUp() {
            var token = getToken()
            if (token==undefined||token == '' || token == null) {
                this.$message({
                    type: "error",
                    message: "请先登录"
                })
                this.$router.push({
                    name: 'login'
                })
            }else{
            var commentId = -1
            var userId = this.$store.state.user.userId
            if (userId == '') {
                userId = -1
            }
            console.log('this.inputone', this.gradeOneInput)
            var inputComment = this.gradeOneInput
            if (inputComment == '' || inputComment == null) {
                Message({
                    type: '输入的内容不能为空,想好再来发吧',
                    message: 'error'
                })
            } else {
                api.commentArticle(this.articleId, userId, inputComment, commentId).then(res => {
                    if (res.data) {
                        Message({
                            type: 'success',
                            message: '评论成功'
                        })
                        this.gradeOneInput = ''
                        api.findArticleComment(articleId).then(res => {
                            this.commentList = res.data
                            this.drawer = true
                        })
                    } else {
                        Message({
                            type: 'error',
                            message: '评论发送失败'
                        })
                    }
                })
            }
            }
        }
    }
}
</script>

<style scoped>
.box-card {
    width: 480px;
}
</style>